<template>
  <div class="app-container">
    <el-tabs v-model="activeTab" @tab-change="onTabChange">
      <!-- 已收明细 -->
      <el-tab-pane label="已收明细" name="received">
        <el-form :inline="true" :model="receivedQuery" class="query-form" @submit.prevent>
          <el-form-item label="年月">
            <el-date-picker
              v-model="receivedQuery.month"
              type="month"
              value-format="YYYY-MM"
              placeholder="请选择年月"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item label="租户名">
            <el-input
              v-model="receivedQuery.qymc"
              placeholder="请输入租户名"
              style="width: 120px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getReceivedList">查询</el-button>
            <el-button @click="resetReceivedQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <!-- 数据看板 -->
        <div class="dashboard beautify-board">
          <div class="dashboard-row">
            <div class="dashboard-item board-blue">
              <span class="label">租用已收</span>
              <span class="value highlight">{{ receivedBoard.ysjeb }}</span>
            </div>
            <div class="dashboard-item board-green">
              <span class="label">已开票额</span>
              <span class="value">{{ receivedBoard.kpje }}</span>
            </div>
            <div class="dashboard-item board-orange">
              <span class="label">未开票额</span>
              <span class="value">{{ receivedBoard.wkpje }}</span>
            </div>
          </div>
        </div>
        <!-- 明细列表 -->
        <el-table :data="receivedList"  style="margin-top: 10px">
          <el-table-column prop="hkmxid" label="房号" align="center" width="100" />
          <el-table-column prop="zt" label="项目" align="center" width="120" />
          <el-table-column prop="qymc" label="租户" align="center" width="300" show-overflow-tooltip />
          <el-table-column prop="nf" label="归属年" align="center" width="80" />
          <el-table-column prop="yf" label="归属月" align="center" width="80" />
          <el-table-column prop="hkzt" label="收款状态" align="center" width="100" />
          <el-table-column prop="sjrq" label="收款日期" align="center" width="120" />
          <el-table-column prop="syje" label="收款金额" align="center" width="120" />
          <el-table-column prop="hkrq" label="应交日期" align="center" width="120" />
          <el-table-column prop="hkks" label="电费周期起" align="center" width="150" />
          <el-table-column prop="hkjs" label="电费周期止" align="center" width="150" />
          <el-table-column prop="hkbz" label="备注" align="center"  />
          <el-table-column label="操作" align="center" width="80">
            <template #default="scope">
              <el-button type="primary" size="small" @click="onDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="receivedTotal > 0"
          :total="receivedTotal"
          v-model:page="receivedQuery.pageNum"
          v-model:limit="receivedQuery.pageSize"
          @pagination="getReceivedList"
        />
      </el-tab-pane>
      <!-- 开票明细 -->
      <el-tab-pane label="开票明细" name="invoice">
        <el-tabs v-model="invoiceTab" type="card" @tab-change="onInvoiceTabChange">
          <!-- 已开票 -->
          <el-tab-pane label="已开票" name="invoiced">
            <el-form :inline="true" :model="invoiceQuery" class="query-form" @submit.prevent>
              <el-form-item label="年月">
                <el-date-picker
                  v-model="invoiceQuery.month"
                  type="month"
                  value-format="YYYY-MM"
                  placeholder="请选择年月"
                  style="width: 120px"
                />
              </el-form-item>
              <el-form-item label="租户名">
                <el-input
                  v-model="invoiceQuery.qymc"
                  placeholder="请输入租户名"
                  style="width: 120px"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getInvoiceList">查询</el-button>
                <el-button @click="resetInvoiceQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <el-table :data="invoiceList"  style="margin-top: 10px">
              <el-table-column prop="hkmxid" label="房号" align="center" width="100" />
              <el-table-column prop="zt" label="项目" align="center" width="120" />
              <el-table-column prop="qymc" label="租户" align="center" width="320" show-overflow-tooltip />
              <el-table-column prop="sjrq" label="收款日期" align="center" width="120" />
              <el-table-column prop="syje" label="收款金额" align="center" width="120" />
              <el-table-column prop="kpbh" label="发票号" align="center" width="320" />
              <el-table-column prop="kpname" label="开票申请人" align="center" width="120" />
              <el-table-column prop="kpzt" label="开票状态" align="center"   />
              <el-table-column prop="kpje" label="开票金额" align="center" width="120" />
              <el-table-column prop="kprq" label="开票日期" align="center" width="120" />
              <el-table-column label="操作" align="center" width="120">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="onDetail(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="invoiceTotal > 0"
              :total="invoiceTotal"
              v-model:page="invoiceQuery.pageNum"
              v-model:limit="invoiceQuery.pageSize"
              @pagination="getInvoiceList"
            />
          </el-tab-pane>
          <!-- 未开票 -->
          <el-tab-pane label="未开票" name="noInvoice">
            <el-form :inline="true" :model="noInvoiceQuery" class="query-form" @submit.prevent>
              <el-form-item label="年份">
                <el-date-picker
                  v-model="noInvoiceQuery.year"
                  type="year"
                  value-format="YYYY"
                  placeholder="请选择年份"
                  style="width: 120px"
                  @change="getNoInvoiceBoard"
                />
              </el-form-item>
              <el-form-item label="租户名">
                <el-input
                  v-model="noInvoiceQuery.qymc"
                  placeholder="请输入租户名"
                  style="width: 120px"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="getNoInvoiceList">查询</el-button>
                <el-button @click="resetNoInvoiceQuery">重置</el-button>
              </el-form-item>
            </el-form>
            <!-- 数据看板 -->
            <div class="dashboard beautify-board">
              <div class="dashboard-row">
                <div class="dashboard-item board-blue">
                  <span class="label">租用已收</span>
                  <span class="value">{{ noInvoiceBoard.ysjeb }}</span>
                </div>
                <div class="dashboard-item board-green">
                  <span class="label">已开票额</span>
                  <span class="value">{{ noInvoiceBoard.kpje }}</span>
                </div>
                <div class="dashboard-item board-orange">
                  <span class="label">未开票额</span>
                  <span class="value highlight" style="color:#e43d33">{{ noInvoiceBoard.wkpje }}</span>
                </div>
              </div>
            </div>
            <el-table :data="noInvoiceList"  style="margin-top: 10px">
              <el-table-column prop="hkmxid" label="房号" align="center" width="100" />
              <el-table-column prop="zt" label="项目" align="center" width="120" />
              <el-table-column prop="qymc" label="租户" align="center" width="300" show-overflow-tooltip />
              <el-table-column prop="sjrq" label="收款日期" align="center" width="120" />
              <el-table-column prop="syje" label="收款金额" align="center" width="120" />
              <el-table-column prop="wkpje" label="未开票金额" align="center" width="120" />
              <el-table-column prop="wkpz" label="未开票原因" align="center"   />
              <el-table-column label="操作" align="center" width="120">
                <template #default="scope">
                  <el-button type="primary" size="small" @click="onDetail(scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="noInvoiceTotal > 0"
              :total="noInvoiceTotal"
              v-model:page="noInvoiceQuery.pageNum"
              v-model:limit="noInvoiceQuery.pageSize"
              @pagination="getNoInvoiceList"
            />
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { parseTime } from "@/utils/ruoyi";

function getLastMonthStr() {
  const d = new Date();
  d.setDate(1); // 设置为当月第一天
  d.setMonth(d.getMonth() - 1);

  console.log(parseTime(d, "{y}-{m}"),parseTime(d),d.getMonth());
  return parseTime(d, "{y}-{m}");
}
function getThisYearStr() {
  return String(new Date().getFullYear());
}

// tab控制
const activeTab = ref("received");
const invoiceTab = ref("invoiced");

// 已收明细
const receivedQuery = reactive({
  month: getLastMonthStr(),
  qymc: "",
  pageNum: 1,
  pageSize: 10,
});
const receivedBoard = ref({
  ysjeb: 50000,
  kpje: 30000,
  wkpje: 20000,
});
const receivedList = ref([
  {
    hkmxid: "A201",
    zt: "项目一",
    qymc: "租户甲",
    nf: "2024",
    yf: "06",
    hkzt: "已收款",
    sjrq: "2024-06-10",
    syje: 20000,
    hkrq: "2024-06-10",
    hkks: "2024-06-01",
    hkjs: "2024-06-30",
    hkbz: "正常",
  },
  {
    hkmxid: "A202",
    zt: "项目二",
    qymc: "租户乙",
    nf: "2024",
    yf: "06",
    hkzt: "已收款",
    sjrq: "2024-06-11",
    syje: 30000,
    hkrq: "2024-06-10",
    hkks: "2024-06-01",
    hkjs: "2024-06-30",
    hkbz: "补缴",
  },
]);
const receivedTotal = ref(2);

// 已开票
const invoiceQuery = reactive({
  month: getLastMonthStr(),
  qymc: "",
  pageNum: 1,
  pageSize: 10,
});
const invoiceList = ref([
  {
    hkmxid: "A201",
    zt: "项目一",
    qymc: "租户甲",
    sjrq: "2024-06-10",
    syje: 20000,
    kpbh: "KP20240610001",
    kpname: "张三",
    kpzt: "已开票",
    kpje: 20000,
    kprq: "2024-06-12",
  },
  {
    hkmxid: "A202",
    zt: "项目二",
    qymc: "租户乙",
    sjrq: "2024-06-11",
    syje: 30000,
    kpbh: "KP20240611001",
    kpname: "李四",
    kpzt: "已开票",
    kpje: 30000,
    kprq: "2024-06-13",
  },
]);
const invoiceTotal = ref(2);

// 未开票
const noInvoiceQuery = reactive({
  year: getThisYearStr(),
  qymc: "",
  pageNum: 1,
  pageSize: 10,
});
const noInvoiceBoard = ref({
  ysjeb: 120000,
  kpje: 90000,
  wkpje: 30000,
});
const noInvoiceList = ref([
  {
    hkmxid: "A203",
    zt: "项目三",
    qymc: "租户丙",
    sjrq: "2024-03-10",
    syje: 15000,
    wkpje: 15000,
    wkpz: "资料未齐",
  },
  {
    hkmxid: "A204",
    zt: "项目四",
    qymc: "租户丁",
    sjrq: "2024-04-10",
    syje: 15000,
    wkpje: 15000,
    wkpz: "未申请",
  },
]);
const noInvoiceTotal = ref(2);

// 查询与重置
function getReceivedList() {}
function resetReceivedQuery() {
  receivedQuery.month = getLastMonthStr();
  receivedQuery.qymc = "";
  receivedQuery.pageNum = 1;
  receivedQuery.pageSize = 10;
}
function getInvoiceList() {}
function resetInvoiceQuery() {
  invoiceQuery.month = getLastMonthStr();
  invoiceQuery.qymc = "";
  invoiceQuery.pageNum = 1;
  invoiceQuery.pageSize = 10;
}
function getNoInvoiceBoard() {}
function getNoInvoiceList() {}
function resetNoInvoiceQuery() {
  noInvoiceQuery.year = getThisYearStr();
  noInvoiceQuery.qymc = "";
  noInvoiceQuery.pageNum = 1;
  noInvoiceQuery.pageSize = 10;
}
function onTabChange() {}
function onInvoiceTabChange() {}
function onDetail(row) {
  alert("查看明细：" + row.hkmxid);
}
</script>

<style scoped>
.query-form {
  margin-bottom: 10px;
}
.dashboard {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(32,159,240,0.08);
  padding: 24px;
  margin-bottom: 32px;
}
.dashboard-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0;
}
.dashboard-item {
  flex: 1;
  margin-right: 16px;
  background: #f6fafd;
  border-radius: 12px;
  padding: 18px 0 12px 0;
  text-align: center;
  box-shadow: 0 2px 8px rgba(32,159,240,0.04);
  transition: box-shadow 0.2s;
  border: 1px solid #e6f3fc;
}
.dashboard-item:last-child {
  margin-right: 0;
}
.label {
  font-size: 15px;
  color: #7a8fa7;
  display: block;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.value {
  font-size: 26px;
  font-weight: bold;
  color: #333;
  display: block;
  letter-spacing: 1px;
}
.value.highlight {
  color: #209ff0;
}
.board-blue {
  border-left: 4px solid #209ff0;
  background: linear-gradient(90deg, #eaf6ff 0%, #f6fafd 100%);
}
.board-green {
  border-left: 4px solid #67c23a;
  background: linear-gradient(90deg, #eafff3 0%, #f6fafd 100%);
}
.board-orange {
  border-left: 4px solid #faad14;
  background: linear-gradient(90deg, #fff7e6 0%, #f6fafd 100%);
}
.el-tabs__header {
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ec;
  padding: 0;
  margin-bottom: 16px;
  border-radius: 8px 8px 0 0;
}
.el-tab-pane {
  padding: 24px;
  background-color: #fff;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.el-table {
  background-color: #f9fafb;
}
.el-table th {
  background-color: #f4f6f8;
  color: #333;
  font-weight: 500;
}
.el-table td {
  color: #666;
}
.el-pagination {
  margin-top: 16px;
  text-align: right;
}
</style>